<script setup>
import { useRoute,useRouter } from "vue-router";
import meipo from "@/utils/meipo.js";
const router = useRouter()
const route =useRoute()
//导入仓库 获取用户信息
import {useUserStore} from '@/stores/user'
const userStore = useUserStore()
import { ref, watch } from "vue";
const onAdd = ()=>{
    if(window.location.pathname === '/mainBoard/feedback'){
        router.push('/addFeedback')
    }else{
        router.push('/addArticle')
    }
    
}
//点击退出按钮，后再点击退出
const onLogout = ()=>{
    userStore.logout()
    //跳转到登录界面
    router.push('/login')
}
//模式切换
 const light = ref(false)
watch(light,(newValue)=>{
     meipo.emit('isLight',newValue)
})
</script>
<template>
    <div class="mainBoder-box">
        <!-- 头部 -->
        <el-menu
        :default-active="route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        >
            <el-menu-item 
            index="/mainBoard/default">全部</el-menu-item>
            <el-menu-item 
            index="/mainBoard/new">最新</el-menu-item>
            <el-menu-item 
            index="/mainBoard/hot">热点</el-menu-item>
            <el-menu-item 
            index="/mainBoard/feedback">反馈</el-menu-item>
            
            <!-- 退出登录图标 -->
            <div class="logout row">
                <el-popconfirm 
                title="你确定要退出登录吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="onLogout"
                @cancel="onCancle"
                >
                    <template #reference>
                        <el-icon size="20" color="#999">
                            <SwitchButton />
                        </el-icon>
                    </template>
                </el-popconfirm>
            </div>
            <!-- 模式切换按钮 -->
            <el-switch
            class="row" 
            v-model="light"  />
        </el-menu>
        <!-- 发布新增活动按钮 -->
        <el-affix :offset="450">
            <el-button 
            @click="onAdd"
            class="add"
            type="primary" 
            plain>
                <el-icon :size="size">
                <Plus></Plus>
                </el-icon>
            </el-button>
        </el-affix>
        <!-- 三级路由出口 帖子列表-->
        <router-view></router-view>
    </div> 
</template>

<style lang="scss" scoped>
.mainBoder-box{
 //background: rgb(229, 230, 235); 
 .el-affix{
    float: right;
    
 }
 .el-menu-demo{
    .row{
        padding: 15px 15px;
    }
 }
}  
</style>